<template>
  <div class="about">
    <h1>This is an about page</h1>
    <input type="text" v-model="fName1">
    <input type="text" v-model="lName1">
    <span>{{ name1 }}</span>
    <span>{{ name1 }}</span>
    <span>{{ name1 }}</span>
    <br>
    <Toast />
    <br>
    <input type="text" v-model="fName2">
    <input type="text" v-model="lName2">
    <span>{{ name2() }}</span>
    <span>{{ name2() }}</span>
    <span>{{ name2() }}</span>
    <br>
    <input type="text" v-model="fName3">
    <input type="text" v-model="lName3">
    <span>{{ name3 }}</span>
    <span>{{ name3 }}</span>
    <span>{{ name3 }}</span>
    <br>
  </div>
</template>

<script>
export default {
  data(){
    return {
      fName1:"",
      lName1:"",
      fName2:"",
      lName2:"",
      fName3:"",
      lName3:"",
      name3:""
    }
  },
  computed:{
    name1(){
      console.log("computed");
      return this.fName1 + this.lName1;
    }
  },
  methods:{
    name2(){
      console.log("methods");
      return this.fName2 + this.lName2;
    }
  },
  watch:{
    fName3(newVal){
      console.log("watch1");
      this.name3 = newVal + this.lName3;
    },
    lName3(newVal){
      console.log("watch2");
      this.name3 = this.fName3 + newVal;
    }
  }
}
</script>
